<template>
  <div class="tactic-details">
    <app-bar type="tactic" :data="tactic" back title="战法详情"></app-bar>
    <div class="content" v-if="tactic">
      <tactic-box :data="tactic" practice></tactic-box>

      <div class="born" v-if="tactic.born_tactic_heroes.length">
        <div class="tit">武将自带</div>
        <div class="heroes">
          <div
            class="item"
            v-for="(id, i) in tactic.born_tactic_heroes"
            :key="'0' + i"
            @click="heroeDetails(id)"
          >
            <div class="img" :type="getHeroe(id).quality">
              <img :src="getHeroe(id).avatar" />
              <div class="country">
                <img
                  v-if="getHeroe(id).country === 1"
                  src="../../assets/wei.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 2"
                  src="../../assets/shu.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 3"
                  src="../../assets/wu.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 4"
                  src="../../assets/qun.svg"
                  alt=""
                />
              </div>
            </div>
            <h3>{{ getHeroe(id).name }}</h3>
          </div>
        </div>
      </div>

      <div class="inherit" v-if="tactic.inherit_tactic_heroes.length">
        <div class="tit">武将传承</div>
        <div class="heroes">
          <div
            class="item"
            v-for="(id, i) in tactic.inherit_tactic_heroes"
            :key="'1' + i"
            @click="heroeDetails(id)"
          >
            <div class="img" :type="getHeroe(id).quality">
              <img :src="getHeroe(id).avatar" />
              <div class="country">
                <img
                  v-if="getHeroe(id).country === 1"
                  src="../../assets/wei.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 2"
                  src="../../assets/shu.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 3"
                  src="../../assets/wu.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 4"
                  src="../../assets/qun.svg"
                  alt=""
                />
              </div>
            </div>
            <h3>{{ getHeroe(id).name }}</h3>
          </div>
        </div>
      </div>

      <div class="event" v-if="tactic.from_tactic_events.length">
        <div class="tit">事件兑换</div>
        <template v-for="(event, i) in tactic.from_tactic_events">
          {{ event.name }}
          <div :key="'event' + i" style="margin: 0.1rem 0 0.16rem">
            <div class="heroes">
              <div
                class="item"
                v-for="(item, i) in event.condition_arr"
                :key="'2' + i"
                @click="heroeDetails(item.hero_id)"
              >
                <div
                  class="img"
                  v-if="item.hero_id"
                  :type="getHeroe(item.hero_id).quality"
                >
                  <img :src="getHeroe(item.hero_id).avatar" />
                  <div class="country">
                    <img
                      v-if="getHeroe(item.hero_id).country === 1"
                      src="../../assets/wei.svg"
                      alt=""
                    />
                    <img
                      v-if="getHeroe(item.hero_id).country === 2"
                      src="../../assets/shu.svg"
                      alt=""
                    />
                    <img
                      v-if="getHeroe(item.hero_id).country === 3"
                      src="../../assets/wu.svg"
                      alt=""
                    />
                    <img
                      v-if="getHeroe(item.hero_id).country === 4"
                      src="../../assets/qun.svg"
                      alt=""
                    />
                  </div>
                </div>
                <div
                  class="noimg"
                  v-else
                  :type="item.hero == '五星' ? 4 : item.hero == '四星' ? 3 : 2"
                >
                  <img src="../../assets/xcw.png" />
                  <div class="country">
                    <img
                      v-if="item.country === 1"
                      src="../../assets/wei.svg"
                      alt=""
                    />
                    <img
                      v-if="item.country === 2"
                      src="../../assets/shu.svg"
                      alt=""
                    />
                    <img
                      v-if="item.country === 3"
                      src="../../assets/wu.svg"
                      alt=""
                    />
                    <img
                      v-if="item.country === 4"
                      src="../../assets/qun.svg"
                      alt=""
                    />
                  </div>
                </div>
                <h3 v-if="!item.hero_id">
                  {{ item.hero + "*" + item.count }}
                </h3>
                <h3 v-else>
                  {{
                    item.hero_id ? getHeroe(item.hero_id).name : event.condition
                  }}
                </h3>
              </div>
            </div>
            <div class="tit">* {{ event.condition_desc }}</div>
            <div class="text">- {{ event.date }}【{{ event.name }}】</div>
          </div>
        </template>
      </div>
      <br />
      <div class="born" v-if="tactic.sortable_heroes.length">
        <div class="tit">适用武将</div>
        <div class="heroes">
          <div
            class="item"
            v-for="(id, i) in tactic.sortable_heroes"
            :key="'0' + i"
            @click="heroeDetails(id)"
          >
            <div class="img" :type="getHeroe(id).quality">
              <img :src="getHeroe(id).avatar" />
              <div class="country">
                <img
                  v-if="getHeroe(id).country === 1"
                  src="../../assets/wei.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 2"
                  src="../../assets/shu.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 3"
                  src="../../assets/wu.svg"
                  alt=""
                />
                <img
                  v-if="getHeroe(id).country === 4"
                  src="../../assets/qun.svg"
                  alt=""
                />
              </div>
            </div>
            <h3>{{ getHeroe(id).name }}</h3>
          </div>
        </div>
      </div>

      <vivo-down></vivo-down>
    </div>

    <div class="loading" v-else>
      <van-loading color="#1989fa" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import TacticBox from "@/components/TacticBox/TacticBox.vue";
export default {
  components: {
    TacticBox,
  },
  name: "TacticDetails",
  data() {
    return {
      tactic: null,
    };
  },
  watch: {
    alldataLoading() {
      this.getData();
    },
  },
  computed: {
    ...mapState("data", ["heroesList", "alldataLoading"]),
  },
  async created() {
    window.injectedAll.sendUv("三国志.战略版搭配");
    if (!this.alldataLoading) await this.getData();
    window.shareData = JSON.parse(JSON.stringify(this.tactic));
    window.injectedAll.shareInit("tactic");
  },
  activated() {
    if (this.tactic) {
      window.shareData = JSON.parse(JSON.stringify(this.tactic));
      window.injectedAll.shareInit("tactic");
    }
  },
  methods: {
    async getData() {
      let id = parseInt(this.$route.params.id);
      this.tactic = await this.$store.dispatch("data/getTactic", id);
    },
    heroeDetails(id) {
      if (!id) return;
      // console.log(this.heroe.control);
      this.$router.push("/heroe/" + id);
    },
    getHeroe(id) {
      let heroe = null;
      this.heroesList.some((item) => {
        if (item.id === id) heroe = item;
        return !!heroe;
      });
      return heroe;
    },
  },
};
</script>

<style lang="scss" scoped>
.tactic-details {
  width: 100%;
  min-height: 100%;
  padding-top: 0.46rem;
  .content {
    padding: 0 0.16rem;
    ::v-deep {
      .tactic-box {
        margin-bottom: 0.16rem;
        .name-box {
          padding-left: 0;
        }
      }
    }
    .tit {
      font-size: 0.14rem;
      color: #333333;
      line-height: 0.2rem;
      margin: 0 0 0.1rem;
    }
    .event {
      .item {
        margin-bottom: 0.15rem;
      }
    }
    .heroes {
      font-size: 0;
      .item {
        display: inline-flex;
        // width: 0.4rem;
        flex-direction: column;
        margin-left: 0.25rem;
        margin-bottom: 0.15rem;
        align-items: center;
        justify-content: center;
        &:nth-child(5n + 1) {
          margin-left: 0.08rem;
        }
        position: relative;
        .noimg {
          width: 0.4rem;
          height: 0.4rem;
          margin-bottom: 0.04rem;
          border-radius: 0.05rem;
          background: #f2f2f2;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          overflow: hidden;
          &[type="4"] {
            border: 2px solid #f2ae32;
          }
          &[type="3"] {
            border: 2px solid #9363de;
          }
          &[type="2"] {
            border: 2px solid #7baefd;
          }
          &[type="1"] {
            border: 2px solid #99cfaa;
          }
          img {
            width: 100%;
            height: 100%;
          }
          .country {
            position: absolute;
            width: 0.13rem;
            height: 0.13rem;
            bottom: 0.02rem;
            right: 0.02rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .img {
          width: 0.38rem;
          height: 0.38rem;
          margin-bottom: 0.04rem;
          border-radius: 0.05rem;
          overflow: hidden;
          position: relative;
          &[type="4"] {
            border: 2px solid #f2ae32;
          }
          &[type="3"] {
            border: 2px solid #9363de;
          }
          &[type="2"] {
            border: 2px solid #7baefd;
          }
          &[type="1"] {
            border: 2px solid #99cfaa;
          }
          .country {
            position: absolute;
            width: 0.13rem;
            height: 0.13rem;
            bottom: 0.02rem;
            right: 0.02rem;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        img {
          width: 100%;
          height: 100%;
        }
        h3 {
          font-size: 0.12rem;
          font-weight: 400;
          color: #8c8c8c;
          line-height: 0.17rem;
          margin: 0;
          white-space: nowrap;
          // position: absolute;
          // bottom: 0;
          // left: 50%;
          // transform: translateX(-50%);
        }
      }
    }
    .text {
      font-size: 0.12rem;
      color: #8c8c8c;
      line-height: 0.17rem;
    }
  }
  .loading {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
